
// 社会招聘scss


@import "Reset.scss";
@import "../scss/Common.scss";

@function Ant_Group($w) {
  @return ($w / 1451) * 100 + vw;
}
@function font($w) {
  @return ($w / 1451) * 100 + vmin;
}
.wrap {
  nav{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    ul{
      li{
        &:nth-child(2) > a{
          color: #1677ff;
        }
      }
    }
  }
  .Back_ground {
    width: Ant_Group(1451);
    height: Ant_Group(400);
    margin: Ant_Group(80) auto 0 ;
  }
  .main {
    width: Ant_Group(1087);
    height: Ant_Group((1170.54));
    margin: 0 auto;
    //   中间头部
    .Middle_head {
      // position: relative;
      width: Ant_Group(1087);
      height: Ant_Group((232.85));
      h3 {
        display: block;
        font-size: Ant_Group(26);
        width: Ant_Group(234.2);
        height: Ant_Group(36.5);
        margin: 0 auto;
      }
      // 搜索框盒子
      .Search_box {
        position: relative;
        i {
          position: absolute;
          top: Ant_Group(70);
          right: Ant_Group(270);
        }
      }
      input {
        width: Ant_Group(568);
        height: Ant_Group(64);
        margin-top: Ant_Group(42.35);
        margin-left: Ant_Group(259.5);
        border-radius: Ant_Group(12);
        opacity: 1;
        border: Ant_Group(1) #fff;
        background: rgba(238, 238, 238, 1);
        font-size: Ant_Group(16);
        // color: rgba(238, 238, 238, 1);
        padding-left: Ant_Group(30);
      }
      a {
        display: block;
        margin: 0 auto;
        text-align: center;
        line-height: Ant_Group(48);
        margin-left: Ant_Group(463.5);
        margin-top: Ant_Group(40);
        width: Ant_Group(160);
        height: Ant_Group(48);
        font-size: Ant_Group(16.5);
        border-radius: 12px;
        opacity: 1;
        color: #fff;
        border: 1px solid rgba(22, 119, 255, 1);
        background: rgba(22, 119, 255, 1);
        //   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
      }
    }
    //   中间图片部分
    .Middle_conten {
      width: Ant_Group(1087);
      height: Ant_Group(577.85);
      .h4_top {
        margin: 0 auto;
        margin-top: Ant_Group(90);
        h4 {
          width: Ant_Group(164.89);
          height: Ant_Group(36.5);
          font-size: Ant_Group(26);
          margin: 0 auto;
        }
      }
      // 图片盒子
      .pictures_box {
        display: flex;
        width: Ant_Group(349);
        height: Ant_Group(410);
        .left {
          margin-top: Ant_Group(40);
          margin-right: Ant_Group(20);
          width: Ant_Group(355);
          border-radius: Ant_Group(12);
          box-shadow: 0 0 5px rgb(225, 221, 221);
          img {
            width: Ant_Group(349);
            height: Ant_Group(200);
            border-radius: Ant_Group(12);
          }
          & > div > span{
            font-size: Ant_Group(20);
            display: inline-block;
            margin: Ant_Group(20) 0 0 Ant_Group(25);
          }
          p:first-of-type {
            font-size: Ant_Group(28);
            font-weight: Ant_Group(300);
            margin-top: Ant_Group(20);
            font-size: Ant_Group(14);
            color: rgba(102, 102, 102, 1);
          }
          p {
            margin-top: Ant_Group(15);
            margin-left: Ant_Group(25);
            font-size: Ant_Group(14);
            color: rgba(102, 102, 102, 1);
          }
          p:last-of-type {
            margin-bottom: Ant_Group(51);
            font-size: Ant_Group(14);
          }
          a {
            width: Ant_Group(56.2);
            height: Ant_Group(16.5);
            margin-left: Ant_Group(25);
            //  margin-top: Ant_Group(51);
            color: rgba(22, 119, 255, 1);
            font-size: 14px;
          }
        }
      }
    }
    .buttom_pohto {
      margin-top: Ant_Group(-60);
      img {
        width: Ant_Group(1087);
        height: Ant_Group(175.84);
      }
    }
  }

  // 底部
  footer {
    width: 100%;
    height: Ant_Group(253);
    background-color: rgba(28, 37, 51, 1);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.6);
    font-style: Ant_Group(12);
    font-weight: 300;
    // 底部地址、咨询、关注模块
    .footer_top {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      .footer_top_content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: Ant_Group(51) 0;
        border-bottom: Ant_Group(1) solid rgba(255, 255, 255, 0.1);
        // 地址
        .footer_top_address {
          @include footerInfo;
        }
        // 咨询
        .footer_top_consult {
          @include footerInfo;
        }
        // 关注
        .footer_top_aboutUs {
          width: Ant_Group(295);
          height: Ant_Group(90);
          h2 {
            font-size: Ant_Group(16);
            color: #fff;
            font-weight: bold;
          }
          // icon图标模块
          .aboutUs_iconGroup {
            position: relative;
            display: flex;
            margin-top: Ant_Group(33);
            .aboutUs_iconItem {
              width: Ant_Group(32);
              margin-right: Ant_Group(18);
            }
            // 图标hover
            .wechat {
              &:hover ~ .wechat_QR_code {
                display: block;
              }
            }
            .weibo {
              &:hover ~ .weibo_QR_code {
                display: block;
              }
            }
            .maimai {
              &:hover ~ .maimai_QR_code {
                display: block;
              }
            }
            // 二维码
            .wechat_QR_code {
              @include QR;
              &::after {
                @include QR_after;
              }
            }
            .weibo_QR_code {
              @include QR;
              left: -9px;
              // display: none;
              &::after {
                @include QR_after;
              }
            }
            .maimai_QR_code {
              @include QR;
              left: 40px;
              &::after {
                @include QR_after;
              }
            }
          }
        }
      }
    }
    // 底部经营许可信息栏
    .footer_bottom {
      width: 100%;
      height: Ant_Group(66);
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        padding: Ant_Group(8);
        position: relative;
        &:nth-child(1)::after {
          @include footer_p_after;
        }
        &:nth-child(2)::after {
          @include footer_p_after;
        }
      }
    }
  }
}
